<template>
  <div class="app-container">
      <div class="filter-container">
        <el-button class="filter-item" type="primary" v-waves icon="el-icon-plus" @click="handleUpdate(null)">添加</el-button>        
        
              
        <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="油站名称" v-model="filters.like$title"></el-input>       
                    
              

        <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
        <el-button class="filter-item" type="primary"  v-waves icon="el-icon-document" @click="exportExcelFile">导出</el-button>
      </div>
      <el-table :data="list" @sort-change="sortChange" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
      style="width: 100%">
        <el-table-column align="center" type="index" label="序号" width="80">
        </el-table-column>

        
        
        <el-table-column  prop="title" align="center" label="油站名称" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.title}}</span>
          </template>
        </el-table-column>
        
        
        <el-table-column  prop="stationNo" align="center" label="油站编码" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.stationNo}}</span>
          </template>
        </el-table-column>
        
        
        <el-table-column  prop="provinceId" align="center" label="省" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.provinceId}}</span>
          </template>
        </el-table-column>
        
        
        <el-table-column  prop="cityId" align="center" label="市" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.cityId}}</span>
          </template>
        </el-table-column>
        
        
        <el-table-column  prop="countyId" align="center" label="区" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.countyId}}</span>
          </template>
        </el-table-column>
        
        
        <el-table-column  prop="largeCountryId" align="center" label="所在大区" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.largeCountryId}}</span>
          </template>
        </el-table-column>
        
        
        <el-table-column width="100"  prop="status" align="center" label="状态">
          <template slot-scope="scope">
              <el-tag :type="scope.row.status | statustagFilter">{{scope.row.status|statusFilter}}</el-tag>
          </template>
        </el-table-column>
        
        
        <el-table-column  prop="isSelfPay" align="center" label="自助支付" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.isSelfPay}}</span>
          </template>
        </el-table-column>
        
        
        <el-table-column  prop="isVestibule" align="center" label="前庭支付" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.isVestibule}}</span>
          </template>
        </el-table-column>
        
        
        <el-table-column  prop="address" align="center" label="油站地址" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.address}}</span>
          </template>
        </el-table-column>
        
        
        <el-table-column  prop="discount" align="center" label="银行卡优惠" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.discount}}</span>
          </template>
        </el-table-column>
        
        
        <el-table-column  prop="telephone" align="center" label="电话" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.telephone}}</span>
          </template>
        </el-table-column>
        
        
        <el-table-column  prop="createTime" align="center" label="创建时间" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.createTime}}</span>
          </template>
        </el-table-column>
        
        
        <el-table-column  prop="wify" align="center" label="wify名称" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.wify}}</span>
          </template>
        </el-table-column>
        
        
        <el-table-column  prop="lng" align="center" label="经度" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.lng}}</span>
          </template>
        </el-table-column>
        
        
        <el-table-column  prop="lat" align="center" label="纬度" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.lat}}</span>
          </template>
        </el-table-column>
        
        
        <el-table-column align="center" label="操作" width="200" class-name="small-padding">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">修改</el-button>          
            <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="params.page"
        :page-sizes="[10,20,30,50]" :page-size="params.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <el-dialog :title="isEditing?'修改':'添加'" :visible.sync="dialogFormVisible">
      <el-form class="dialog-form" :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="120px">
        
        <el-form-item label="油站名称" prop="title">          
            
                                  
                  <el-input v-model="temp.title" placeholder="油站名称"></el-input>
                
            
        </el-form-item>         
        
        <el-form-item label="油站编码" prop="stationNo">          
            
                                  
                  <el-input v-model="temp.stationNo" placeholder="油站编码"></el-input>
                
            
        </el-form-item>         
        
        <el-form-item label="省" prop="provinceId">          
            
                                  
                  <el-input v-model="temp.provinceId" placeholder="省"></el-input>
                
            
        </el-form-item>         
        
        <el-form-item label="市" prop="cityId">          
            
                                  
                  <el-input v-model="temp.cityId" placeholder="市"></el-input>
                
            
        </el-form-item>         
        
        <el-form-item label="区" prop="countyId">          
            
                                  
                  <el-input v-model="temp.countyId" placeholder="区"></el-input>
                
            
        </el-form-item>         
        
        <el-form-item label="所在大区" prop="largeCountryId">          
            
                                  
                  <el-input v-model="temp.largeCountryId" placeholder="所在大区"></el-input>
                
            
        </el-form-item>         
        
        <el-form-item label="状态" prop="status">          
            
                                  
                  <el-select v-model="temp.status" placeholder="请选择">
                    <el-option
                      v-for="(item,value) in statusFilter"
                      :key="value"
                      :label="item"
                      :value="value">
                    </el-option>
                  </el-select>
                
            
        </el-form-item>         
        
        <el-form-item label="自助支付" prop="isSelfPay">          
            
                                  
                  <el-input v-model="temp.isSelfPay" placeholder="自助支付"></el-input>
                
            
        </el-form-item>         
        
        <el-form-item label="前庭支付" prop="isVestibule">          
            
                                  
                  <el-input v-model="temp.isVestibule" placeholder="前庭支付"></el-input>
                
            
        </el-form-item>         
        
        <el-form-item label="油站地址" prop="address">          
            
                                  
                  <el-input v-model="temp.address" placeholder="油站地址"></el-input>
                
            
        </el-form-item>         
        
        <el-form-item label="银行卡优惠" prop="discount">          
            
                                  
                  <el-input v-model="temp.discount" placeholder="银行卡优惠"></el-input>
                
            
        </el-form-item>         
        
        <el-form-item label="电话" prop="telephone">          
            
                                  
                  <el-input v-model="temp.telephone" placeholder="电话"></el-input>
                
            
        </el-form-item>         
        
        <el-form-item label="wify名称" prop="wify">          
            
                                  
                  <el-input v-model="temp.wify" placeholder="wify名称"></el-input>
                
            
        </el-form-item>         
        
        <el-form-item label="经度" prop="lng">          
            
                                  
                  <el-input v-model="temp.lng" placeholder="经度"></el-input>
                
            
        </el-form-item>         
        
        <el-form-item label="纬度" prop="lat">          
            
                                  
                  <el-input v-model="temp.lat" placeholder="纬度"></el-input>
                
            
        </el-form-item>         
                         
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" :loading="submiting" @click="submitFormAction">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

let statusFilter = ["不可用","可用"];
let statustagFilter = ["success", "danger","info","warning"];

export default {
  data() {
    return {
      temp:{
          
          id:'',
          
          title:'',
          
          stationNo:'',
          
          provinceId:'',
          
          cityId:'',
          
          countyId:'',
          
          largeCountryId:'',
          
          status:'',
          
          isSelfPay:'',
          
          isVestibule:'',
          
          address:'',
          
          discount:'',
          
          telephone:'',
          
          wify:'',
          
          lng:'',
          
          lat:'',
          
      },
      
            statusFilter:statusFilter,
            
      rules: {
        
        title: [
          
          { required: true, message: "油站名称不能为空", trigger: "change",max:50}
          
        ],        
        
        stationNo: [
          
          { required: true, message: "油站编码不能为空", trigger: "change",max:30}
          
        ],        
        
        provinceId: [
          
          { required: true, message: "省不能为空", trigger: "change"}
          
        ],        
        
        cityId: [
          
          { required: true, message: "市不能为空", trigger: "change"}
          
        ],        
        
        countyId: [
          
          { required: true, message: "区不能为空", trigger: "change"}
          
        ],        
        
        largeCountryId: [
          
          { required: true, message: "所在大区不能为空", trigger: "change"}
          
        ],        
        
        status: [
          
          { required: true, message: "状态不能为空", trigger: "change"}
          
        ],        
        
        isSelfPay: [
          
          { required: true, message: "自助支付不能为空", trigger: "change"}
          
        ],        
        
        isVestibule: [
          
          { required: true, message: "前庭支付不能为空", trigger: "change"}
          
        ],        
        
        address: [
          
          { required: true, message: "油站地址不能为空", trigger: "change",max:600}
          
        ],        
        
        discount: [
          
          { required: true, message: "银行卡优惠不能为空", trigger: "change"}
          
        ],        
        
        telephone: [
          
          { required: true, message: "电话不能为空", trigger: "change",max:11}
          
        ],        
        
        wify: [
          
          { required: true, message: "wify名称不能为空", trigger: "change",max:100}
          
        ],        
        
        lng: [
          
        ],        
        
        lat: [
          
        ],        
        
      }
    };
  },
  created() {
    this.init("oil_station",1).loadData();

    

    
  },
  filters: {

    statusFilter(status){
        return statusFilter[parseInt(status)];
    },
    statustagFilter(status){
        return statustagFilter[parseInt(status)];
    },

  },
  methods: {
    exportExcelFile() {
      this.exportExcel({
        title: "油站管理",
        fields: [
          
            
            {field:'title',title:'油站名称'}
          
            ,
            {field:'stationNo',title:'油站编码'}
          
            ,
            {field:'provinceId',title:'省'}
          
            ,
            {field:'cityId',title:'市'}
          
            ,
            {field:'countyId',title:'区'}
          
            ,
            {field:'largeCountryId',title:'所在大区'}
          
            ,
            {field:'status',title:'状态',valueMap:["不可用","可用"]}
          
            ,
            {field:'isSelfPay',title:'自助支付'}
          
            ,
            {field:'isVestibule',title:'前庭支付'}
          
            ,
            {field:'address',title:'油站地址'}
          
            ,
            {field:'discount',title:'银行卡优惠'}
          
            ,
            {field:'telephone',title:'电话'}
          
            ,
            {field:'createTime',title:'创建时间'}
          
            ,
            {field:'wify',title:'wify名称'}
          
            ,
            {field:'lng',title:'经度'}
          
            ,
            {field:'lat',title:'纬度'}
          
        ]
      }).then(info => {
        this.openWin(info);        
      });
    }
  }
};
</script>
